import { FC, useState } from "react"
import styles from "../styles/departmentCard.less"
import { formatTypeDate } from "@/utils/formatData"

const typeObjectList = [
  {
    type: "1",
    colorMap: "#5292DE",
    colorMapA: "#1869CA",
    iconMap: require("@/asstes/hospitalizedInfo/type-1.png"),
    iconMapA: require("@/asstes/hospitalizedInfo/type-1-a.png"),
    sIconMap: require("@/asstes/hospitalizedInfo/type-4-s.png"),
  },
  {
    type: "2",
    colorMap: "#2AC592",
    colorMapA: "#0AB17A",
    iconMap: require("@/asstes/hospitalizedInfo/type-2.png"),
    iconMapA: require("@/asstes/hospitalizedInfo/type-2-a.png"),
    sIconMap: require("@/asstes/hospitalizedInfo/type-2-s.png"),
  },
  {
    type: "3",
    colorMap: "#B62A2A",
    colorMapA: "#B62A2A",
    iconMap: require("@/asstes/hospitalizedInfo/type-3.png"),
    iconMapA: require("@/asstes/hospitalizedInfo/type-3-a.png"),
    sIconMap: require("@/asstes/hospitalizedInfo/type-3-s.png"),
  },
  {
    type: "4",
    colorMap: "#D7A700",
    colorMapA: "#D7A700",
    iconMap: require("@/asstes/hospitalizedInfo/type-4.png"),
    iconMapA: require("@/asstes/hospitalizedInfo/type-4-a.png"),
    sIconMap: require("@/asstes/hospitalizedInfo/type-4-s.png"),
  }
]

interface childProps {
  item: any,
  collapsed: boolean
}

const departmentCard: FC<childProps> = ({ item, collapsed }) => {
  // const [item, setItem] = useState<any>({
  //   id: 1,
  //   datetime: "2020-12-15",
  //   deptCode: "223",
  //   deptName: "骨科",
  //   diagCode: "GZ0932",
  //   diagName: "腿部骨头骨折",
  //   mainDiagName: "腿部骨头骨折",
  //   name: "住院",
  //   type: 1,
  //   dec: '第五次就诊'
  // })

  /**
   * 当前类型对象
   */

  const getType = () => {
    let typeObject = typeObjectList.find(newItem => {
      return newItem.type == item.type
    })
    if (typeObject) {
      return typeObject
    } else {
      return typeObjectList[0]
    }
  }

  const cardHeadStyle = {
    backgroundColor: getType().colorMap,
    borderColor: getType().colorMap,
  }
  const tagStyle = {
    color: getType().colorMap,
  }

  const cardChild = () => {
    return (
      <div>
        <div className={styles.cardHead} style={cardHeadStyle}>
          <div className={`${styles.tag} ${styles.active}`} style={tagStyle}>
            <img className={styles.typeIcon} src={getType().iconMapA} alt="" />
            {item.name}
          </div>
          {item ? item.datetime : ""} ({item.dec})
        </div>
        <div className={styles.cardBody}>
          <div>
            <div className={styles.item}>
              <span className={styles.label}>{item.mainDiagName ? "主要诊断：" : "当前诊断："}</span>
              <span className={styles.info}>{item.mainDiagName || item.diagName}</span>
            </div>
            <div className={styles.item}>
              <span className={styles.label}>就诊科室：</span>
              <span className={styles.info}>{item.deptName}</span>
            </div>
            <div className={styles.item}>
              <span className={styles.label}>就诊结果：</span>
              <span className={styles.info}>对方水电费</span>
            </div>
          </div>
        </div>
      </div>
    )
  }

  const cardChildMin = () => {
    return (
      <div>
        <div className={styles.cardHeadMin} style={cardHeadStyle}>
          <img className={styles.typeIcon} src={getType().sIconMap} alt="" />{formatTypeDate(item.datetime)}
        </div>
        <div className={styles.cardBody}>
          {/* <div>{formatTypeDate(item.datetime, 'YYYY--MM-DD')}</div> */}
          <div>{formatTypeDate(item.datetime, "MM-DD")}</div>
        </div>
      </div>
    )
  }


  return (
    <div className={styles.departmentCard}>
      {
        collapsed ? cardChildMin() : cardChild()
      }
    </div>
  )
}

export default departmentCard